<template>
  <div class="hotel-order">
    <v-header ref="header" title="填写订单"></v-header>
    <div class="main" ref="main">
      <div class="hotel-wrapper">
        <div class="hotel-info">
          <div class="thumb" v-lazy:backgroundImage="selectedHotel.room.fxzt"></div>
          <div class="wrapper">
            <p class="name">{{selectedHotel.hotel.name + ' * ' + selectedHotel.room.fxmc + ' * ' + selectedHotel.plan.jhmc}}</p>
            <p class="desc">{{selectedHotel.room.fxms}}</p>
          </div>
        </div>
        <div class="hotel-params">
          <div class="date-select">
            <p class="date">{{startDate.format}}
              <span class="date-str">{{startDate.str}}</span>
            </p>
            <p class="divider">-</p>
            <p class="date">{{endDate.format}}
              <span class="date-str">{{endDate.str}}</span>
            </p>
          </div>
          <p>
            <span style="font-size: 18px; color: #333;">共{{diffDay}}晚</span>
            <!-- <i class="fa fa-angle-right" aria-hidden="true"></i> -->
          </p>
        </div>
      </div>

      <ul class="user-info">
        <li>
          <label>房屋套数</label>
          <inline-x-number v-model="roomNumber" width="50px" button-style="round" :min="1" :max="5"></inline-x-number>
        </li>
        <li>
          <label>入住人数</label>
          <inline-x-number v-model="peopleNumber" width="50px" button-style="round" :min="1" :max="5"></inline-x-number>
        </li>
        <li>
          <label>入住人</label>
          <x-input v-model="username" placeholder="请输入联系人姓名" required text-align="right" :show-clear="false"></x-input>
        </li>
        <li>
          <label>手机号</label>
          <x-input v-model="phoneNumber" type="tel" placeholder="请输入联系人手机号" is-type="china-mobile" required text-align="right" :show-clear="false"></x-input>
        </li>
        <li>
          <label>邮箱</label>
          <x-input v-model="email" type="email" placeholder="联系人邮箱(非必填)" is-type="email" text-align="right" :show-clear="false"></x-input>
        </li>
        <li @click.stop="showSelectEnterTime = true">
          <label>到店时间</label>
          <p class="right" :class="{tip: enterTime === ''}">
            {{enterTime === '' ? '选择到店时间' : enterTime}}
            <i class="fa fa-angle-right" aria-hidden="true"></i>
          </p>
        </li>
      </ul>

      <ul class="order-notice">
        <li>{{selectedHotel.plan.qxgz}}</li>
        <li>{{selectedHotel.plan.fpsm}}</li>
        <li>到店后，凭手机号或者姓名确认预定的房间。支付完成后，订单结束</li>
      </ul>
    </div>
    <div class="bottom" :style="{paddingBottom: paddingBottom + 'px'}">
      <p class="left">
        <span class="type">到店支付</span>
        ￥<span class="price">{{totalPrice}}</span>
      </p>
      <p class="right" @click="submitOrder">提交订单</p>
    </div>
    <!-- 到店时间 -->
    <div v-transfer-dom>
      <popup v-model="showSelectEnterTime" position="bottom" width="100%" class="popup-wrapper">
        <ul class="enter-time" :style="{paddingBottom: paddingBottom + 'px'}">
          <li v-for="(item, index) in enterTimeList" :key="index" @click.stop="selectEnterTime(item.zzsj, item.zwsj, item.sjsm)">
            <p>{{item.zzsj}}  -  {{item.zwsj}}</p>
            <p>{{item.sjsm}}</p>
          </li>
        </ul>
      </popup>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { TransferDom, Popup, InlineXNumber, XInput, Actionsheet } from 'vux'

import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'
import { mapGetters } from 'vuex'
import { isIphoneX, isIOS } from '@/assets/js/brower'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  name: 'HotelOrder',
  mixins: [handleBackMixin],
  data() {
    return {
      showSelectEnterTime: false,
      startDate: null,
      endDate: null,
      roomNumber: 1,
      peopleNumber: 1,
      username: localUser.get('realName') || localUser.get('nickname') || '',
      phoneNumber: localUser.get('phoneNum') || '',
      email: '',
      enterTime: '',
      enterTimeStart: '',
      enterTimeEnd: '',
      enterTimeList: [],
      allPopupModels: ['showSelectEnterTime']
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Popup,
    InlineXNumber,
    XInput,
    Actionsheet
  },
  computed: {
    diffDay() {
      return Math.abs(this.startDate.date.diff(this.endDate.date, 'days'))
    },
    totalPrice() {
      return parseFloat(this.selectedHotel.plan.srxsj * this.roomNumber * this.diffDay, 2)
    },
    ...mapGetters(['selectedHotel'])
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }
    const beginDate = this.moment(this.selectedHotel.params.startDate)
    const endDate = this.moment(this.selectedHotel.params.endDate)
    const today = this.moment().toArray().slice(0, 3)

    const startDiff = beginDate.diff(today, 'days')
    const endDiff = endDate.diff(today, 'days')

    this.startDate = {
      date: beginDate,
      format: beginDate.format('MM月DD日'),
      str: startDiff === 0 ? '今天' : beginDate.format('ddd')
    }
    this.endDate = {
      date: endDate,
      format: endDate.format('MM月DD日'),
      str: endDiff === 1 ? '明天' : endDate.format('ddd')
    }

    this._getArriveTime()
  },
  mounted() {
    this.$refs.main.style.height = window.innerHeight - this.$refs.header.$el.offsetHeight - 44 - this.paddingBottom + 'px'
  },
  methods: {
    _getArriveTime() {
      axios.post(this, '/v1/b2c/hotel', {
        method: 'HOTEL_B2C_getArriveTime',
        hyid: '',
        start: 1,
        count: 10,
        rzrq: this.startDate.date.format('YYYY-MM-DD')
      }, (data) => {
        if (data && data.res && data.res.ddsjjh) {
          this.enterTimeList = data.res.ddsjjh
        }
      }, null, false)
    },
    selectEnterTime(start, end, other) {
      this.enterTimeStart = start
      this.enterTimeEnd = end
      this.enterTime = other
      this.showSelectEnterTime = false
    },
    submitOrder() {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        return
      }
      if (this.username === '') {
        this.$vux.toast.text('请填写入住人姓名', 'middle')
        return
      }
      if (this.phoneNumber === '') {
        this.$vux.toast.text('请填写联系人手机号', 'middle')
        return
      }
      if (this.enterTime === '') {
        this.$vux.toast.text('请选择到店时间', 'middle')
        return
      }
      const _self = this
      this.$vux.confirm.show({
        title: '温馨提示',
        content: '请仔细阅读预定规则，并确认订单的相关信息。',
        onConfirm () {
          axios.post(_self, '/v1/hotelOrder', {
            ddly: isIOS() ? 2 : 1,
            jdid: _self.selectedHotel.hotel.fromId,
            fxid: _self.selectedHotel.room.fxid,
            jgjhid: _self.selectedHotel.plan.jhid,
            zrzrs: _self.peopleNumber,
            roomNum: _self.roomNumber,
            rzrq: _self.startDate.date.format('YYYY-MM-DD'),
            ldrq: _self.endDate.date.format('YYYY-MM-DD'),
            zzddsj: _self.enterTimeStart,
            zwddsj: _self.enterTimeEnd,
            rzr: _self.username,
            lxrxm: _self.username,
            sj: _self.phoneNumber,
            email: _self.email,
            userId: localUser.get('id'),
            goodsName: _self.selectedHotel.hotel.name + ' * ' + _self.selectedHotel.room.fxmc + ' * ' + _self.selectedHotel.plan.jhmc,
            goodsImg: _self.selectedHotel.room.fxzt
          }, (data) => {
            _self.$vux.toast.text('提交订单成功', 'middle')
            _self.$router.push(`/hotelOrderDetail/${data}`)
          }, () => {
            _self.$vux.toast.text('提交订单失败', 'middle')
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.hotel-order
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
.main
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
.hotel-wrapper
  background #ffffff
  box-shadow 0 0 10px #e0e0e0
  .hotel-info
    display flex
    padding 16px
    padding-left 0
    margin-left 16px
    border-bottom 1px solid #e2e2e2
    .thumb
      width 80px
      height 60px
      border-radius 3px
      background-size cover
      background-repeat no-repeat
      background-position center
      margin-right 8px
    .wrapper
      width calc(100% - 78px)
    .name
      height 44px
      font-size 17px
      color #333
      font-weight bold
      line-height 1.3
      no-wrap-n(2)
    .desc
      font-size 13px
      color #999
      line-height 1
      margin-top 4px
      no-wrap()
.hotel-params
  display flex
  justify-content space-between
  align-items center
  height 48px
  line-height 48px
  padding 0 16px
  i
    font-size 18px
    color #999999
    margin-left 4px
    margin-right 16px
  .date-select
    display flex
    align-items center
    .date
      font-size 18px
      color #333333
    .date-str
      font-size 13px
      color #999999
      margin-left 8px
    .divider
      font-size 18px
      margin 0 8px
.user-info
  margin-top 20px
  background #ffffff
  padding 0 16px
  font-size 15px
  li
    display flex
    padding 12px 0
    justify-content space-between
    border-bottom 0.5px solid #e2e2e2
    &:last-child
      border-bottom none
    label
      color #666
    .right
      color #333
      font-size 15px
      i
        color #666
        margin-left 4px
    .tip
      color #999
.enter-time
  padding 0 16px
  background #ffffff
  li
    display flex
    justify-content space-between
    color #999
    font-size 15px
    border-bottom 0.5px solid #e2e2e2
    padding 16px 0
    &:last-child
      border-bottom none
    p
      &:last-child
        color #333
.bottom
  height 44px
  line-height 44px
  display flex
  border-top 1px solid #e2e2e2
  box-shadow 0 0 10px #e0e0e0
  background #fff
  .left
    width 55%
    text-align center
    font-size 13px
    background #fff
    color $color-theme
    .type
      margin-right 8px
      color $color-level
    .price
      font-size 17px
  .right
    width 45%
    background $color-theme
    color #fff
    font-size 17px
    text-align center
.order-notice
  padding 20px 16px
  margin-top 20px
  li
    position relative
    color #999
    font-size 15px
    line-height 1.6
    margin-bottom 4px
    padding-left 12px
    &:before
      content '*'
      display block
      color red
      position absolute
      left 0
      top 0
</style>

<style>
.hotel-order .user-info .vux-x-input .weui-input {
  font-size: 15px;
}
.hotel-order .user-info .vux-number-input{
  font-size: 16px;
}
.hotel-order .user-info .weui-cell {
  padding: 0;
}
.hotel-order .user-info .vux-x-input::before {
  display: none;
}
</style>

